<template>
	<div class="wrapper">
		<component :is="moduleName" :detail-data="detailData" ref="detailModule"></component>
		<div class="btn-save-wrapper" v-if="moduleName">
			<Button type="primary" size="default" @click="saveEidt" >保存</Button>
		</div>
  </div>
</template>

<script>

// 微页面顶部标题编辑
import TopTitleDetail from "../TopTitleModule/TopTitleDetail"
// 轮播编辑
import BannerDetail from "../BannerModule/BannerDetail"
// 快速入口编辑
import ActivityDetail from "../ActivityModule/ActivityDetail"
// 普通组件编辑
import NormalDetail from "../NormalModule/NormalDetail"
// 秒杀组件编辑
import SecondKillDetail from "../SecondKillModule/SecondKillDetail"
// 拼团组件编辑
import GroupDetail from "../GroupModule/GroupDetail"
// 达人卡片编辑
import TalentDetail from "../TalentModule/TalentDetail"
// 图片组件编辑
import ImageDetail from "../ImageModule/ImageDetail"
// 商品合辑编辑
import GoodsAlbumDetail from "../GoodsAlbumModule/GoodsAlbumDetail"
// 搜索组件编辑
import SearchDetail from "../SearchModule/SerachDetail"
// 文本组件编辑
import TextDetail from "../TextModule/TextDetail"
// 滑动组件编辑
import SliderDetail from "../SliderModule/SliderDetail"
// 榜单组件编辑
import RankDetail from "../RankModule/RankDetail"
// 分类组件编辑
import ClassDetail from "../ClassModule/ClassDetail"
// 悬浮组件编辑
import SuspensionDetail from "../SuspensionModule/SuspensionDetail"
// 抽奖组件
import LotteryDetail from "../LotteryModule/LotteryDetail"
// 商品列表组件
import GoodsListDetail from "../GoodsListModule/GoodsListDetail"
// 距离组件
import DistanceChannelDetail from "../DistanceChannelModule/DistanceChannelDetail"


export default {
  	name: 'EditCommonModule',		
  	props: {
      moduleData: {
        default: null
      }
  	},
    data () {
        return {
        	moduleName: "",
          detailData: null
    	}
    },
    methods: {
    	saveEidt() {
          if (this.detailData.label_type == 'textChannel') {
            this.$refs.detailModule.getContent();
          }
          // 深拷贝对象
          var compomentData = JSON.parse(JSON.stringify(this.detailData));
          // 传给服务器的display字段是Boolean类型
          if (compomentData.json && compomentData.json.more) {
            compomentData.json.more.display = compomentData.json.more.display=="true"?true:false;
          }
          this.$emit("save",compomentData);    
    	}
    },
    
    created() {
    },

    watch: {
      moduleData: {
        // 监听赋值
        handler(newVal) {
            console.log(newVal)
            if (newVal) {
              if (newVal.type == "topTitleChannel") {
                this.moduleName = "top-title-detail";
              } else if (newVal.type == "bannerChannel") {
                this.moduleName = "banner-detail";
              } else if (newVal.type == "activityChannel") {
                this.moduleName = "activity-detail";
              } else if (newVal.type == "normalChannel") {
                this.moduleName = "normal-detail";
              } else if (newVal.type == "secKillChannel") {
                this.moduleName = "second-kill-detail";
              } else if (newVal.type == "hotFightGroupChannel") {
                this.moduleName = "group-detail";
              } else if (newVal.type == "talentChannel") {
                this.moduleName = "talent-detail";
              } else if (newVal.type == "imageCardChannel") {
                this.moduleName = "image-detail";
              } else if (newVal.type == "goodsAlbumChannel") {
                this.moduleName = "goods-album-detail";
              } else if (newVal.type == "searchChannel") {
                this.moduleName = "search-detail";
              } else if (newVal.type == "textChannel") {
                this.moduleName = "text-detail";
              } else if (newVal.type == "slideChannel") {
                this.moduleName = "slider-detail";
              } else if (newVal.type == "rankChannel") {
                this.moduleName = "rank-detail";
              } else if (newVal.type == "classChannel") {
                this.moduleName = "class-detail";
              } else if (newVal.type == "merchantEntryChannel") {
                this.moduleName = "suspension-detail";
              } else if (newVal.type == "lotteryChannel") {
                this.moduleName = "lottery-detail";
              } else if (newVal.type == "goodsList") {
                this.moduleName = "goods-list-detail";
              } else if (newVal.type == "distanceChannel") {
                this.moduleName = "distance-channel-detail";
              } else {
                this.moduleName = '';
              }

              // 深拷贝
              var obj=JSON.parse(JSON.stringify(newVal)); 
              var tmpModuleData = obj.data; 
              tmpModuleData.label_type = obj.type;

              if (newVal.type == "goodsAlbumChannel" && !tmpModuleData.json[0].more) {
                // 商品合辑处理
                tmpModuleData.json[0].more = {}
                tmpModuleData.json[0].more.display = 'true';
                tmpModuleData.json[0].more.title = '查看更多';
                tmpModuleData.json[0].more.path = '';
              } else if (newVal.type == "textChannel") {
                // 文本组件处理
                var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
                if (tmpModuleData.json == null) {
                  tmpModuleData.json = "";
                }
                tmpModuleData.json = tmpModuleData.json.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { return arrEntities[t]; })
              } else if (newVal.type == "topTitleChannel") {
                // 微页面基础信息处理
                tmpModuleData.updatePage = true;
                if (tmpModuleData.json && tmpModuleData.json.share_image == null) {
                  tmpModuleData.json.share_image = "";
                }
              } else if (newVal.type == "rankChannel") {
                // 榜单组件标识
                tmpModuleData.isRank = true;
              } else if (newVal.type == "talentChannel") {
                // 达人组件标识
                tmpModuleData.isTalent = true;
              } 

              // 兼容错误情况
              if (Object.keys(tmpModuleData).length == 0) return;
              
              if (tmpModuleData.json && tmpModuleData.json.more) {
                // 初始化 转换display字段为字符串
                if (tmpModuleData.json.more.skip_type == null) {
                  tmpModuleData.json.more.skip_url = "";
                  tmpModuleData.json.more.skip_type = "";
                }
                tmpModuleData.json.more.display = tmpModuleData.json.more.display+"";
              }

              this.detailData = tmpModuleData;

            }
        },
        deep: true
      },
    },

    components: {
    	TopTitleDetail,BannerDetail,ActivityDetail,NormalDetail,SecondKillDetail,GroupDetail,TalentDetail,ImageDetail,GoodsAlbumDetail,SearchDetail,TextDetail,SliderDetail,RankDetail,ClassDetail,SuspensionDetail,LotteryDetail,GoodsListDetail,DistanceChannelDetail
    }
 }
</script>

<style scoped>	
	.wrapper {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.component-wrapper {
		flex: 1;
	}
   .btn-save-wrapper {
   	  display: flex;
   	  align-items: center;
	    justify-content: center;
   	  height: 50px;
   	  border-top: 1px solid #f2f2f2;
      cursor: pointer;
   }
   .btn-save {
	    color: #fff;
	    background-color: #2d8cf0;
	    border-color: #2d8cf0;
	    padding: 6px 30px 6px 30px;
	    font-size: 14px;
	    border-radius: 4px;
   }
</style>
